<html>
<head>
    <link rel="stylesheet" href="./css/element-plus.css"/>
    <script src="./js/vue.3.3.12.global.min.js"></script>
    <script src="./js/element-plus.js"></script>
    <script src="./js/axios.js"></script>
</head>
<body>
<div id="app">
    <el-card :click="openSite(item.url)" shadow="always" v-for="item in cards" class="jin-list-card" :class="{'select-item': selectCode === item.code}"> {{code}}{{item.name}} </el-card>
</div>
</body>
<script>
    const {createApp, ref} = Vue

    const app = createApp({
        setup() {
            let code = ref(-1)
            let selectCode = ref(1)
            let html = ref(``)
            let cards = [
                {code: 1, name: '测试1',url: 'http://www.njatlhb.com/'},
                {code: 2, name: '测试2',url:''},
                {code: 3, name: '测试3',url:''},
                {code: 4, name: '测试4',url:''}
            ]
            return {
                code,
                selectCode,
                cards,
                html
            }
        },
        method: {
            //获取网页
            async getPage(url,charset = 'UTF-8'){
                var data;
                try {
                    const res = await axios({
                        method: 'get',
                        url: url,
                        responseType: "arraybuffer",
                        headers:{
                            'User-Agent':'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36 Edg/99.0.1150.36'
                        }
                    })
                    data = iconv.decode(res.data, charset);//编码转换
                } catch (error) {
                    // console.log('获取',url,'页面失败！',error)
                    if (error.response && error.response.status === 404) {
                        console.log('【******页面不存在******】');
                    } else {
                        console.log('抓取',url,'页面出错:', error.message);
                    }
                    data = "error:" + error.response?.status;
                }
                return data;
            },
            openSite(url){
                
            }
        },
        mounted() {
            document.onkeypress = (event) => {
                this.code = event.which
                if (this.code === 119) {
                } else if (this.code === 115) {

                } else if (this.code === 97) {
                    const nextElement = this.$el.nextElementSibling;
                    console.log(nextElement);
                } else if (this.code === 100) {
                    this.selectCode = this.selectCode + 1
                }
            }
        }
    })
    app.use(ElementPlus)
    app.mount('#app')
</script>
</html>
<style>
    .jin-list-card {
        width: 300px;
        height: 300px;
        margin: 10px 10px 10px 10px;
        display: inline-block;
    }

    .select-item {
        border: 5px solid #00F;
    }
</style>
 